* {
  margin: 0;
  padding: 0;
}

html,
body {
  box-sizing: border-box;
}

.root {
  width: 600px;
  -moz-column-count: 4;
  column-count: 4;
  -moz-column-gap: 40px;
  -webkit-column-gap: 40px;
  column-gap: 40px;
}

.bac {
  width: 200px;
  height: 200px;
  padding: 20px;
  display: inline-block;
  border: 10px dashed red;
  background: url(../../../docs/assets/demo4.jpg) no-repeat;
  background-size: 100% 100%;
}

.border-clip {
  background-clip: border-box;
}

.content-clip {
  background-clip: content-box;
}

.padding-clip {
  background-clip: padding-box;
}

.border-origin {
  background-origin: border-box;
  background-position: -10px -10px;
}

.content-origin {
  background-origin: content-box;
  background-position: -10px -10px;
}

.padding-origin {
  background-origin: padding-box;
  background-position: -10px -10px;
}

.reflect {
  height: 144px;
  width: 144px;
  background: url(../../../docs/assets/demo3.jpg) 100% 100% no-repeat;
  -webkit-box-reflect: right 10px;
  margin: 10px auto;
}

.gradient {
  width: 200px;
  height: 100px;
  background-image: linear-gradient(to left, red, green 50%, blue);
  margin: 10px auto;
}

.mask {
  margin: 10px auto;
  /* width: 200px;
  height: 100px;
  background: url(../../../docs/assets/demo2.jpg);
  mask-image: url(../../../docs/assets/demo3.jpg);
  mask-position: 50% 50%;
  mask-repeat: no-repeat; */
  width: 100px;
  height: 100px;
  background-color: #8cffa0;
  mask-image: url(../../../docs/assets/demo3.jpg);
  -webkit-mask-image: url(../../../docs/assets/demo3.jpg);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

div {
  animation: fadeIn 2s ease-in-out;
}